<template>
  <div>
    <div class="menu">
      <div class="contains">
        <router-link to="/">源代码教育</router-link>
        <router-link to="/">家</router-link>
        <router-link to="/index">首页</router-link>
        <router-link to="/course">课程1</router-link>
        <router-link :to="{path:'/course'}">课程2</router-link>
        <router-link :to="{name:'Course'}">课程3</router-link>
        <router-link :to="{name:'Course',query:{size:21,page  :9}}">课程-21-9</router-link>
        <router-link :to="{name:'Detail',params:{id:98},query:{size:22,page:10}}">详情-22- 10</router-link>
        <router-link to="/news">咨询</router-link>
        <div class="btn">
          <span>购物车数量是{{carnum}}个</span>
          <a v-if="name" @click="doLogout">{{name}}</a>
          <router-link v-else :to="{name:'Login'}">登录</router-link>
        </div>
      </div>

    </div>
    <div class="contains">
      <router-view/>
    </div>
  </div>

</template>

<script setup>
import {ref,computed} from 'vue';
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const router = useRouter();
const store = useStore()
const name = ref(store.state.username)
const carnum = computed(() => store.state.car)

function doLogout(){
  store.commit("logout")

  router.push({name:'Login'})
}
</script>
<style>
* {
  margin: 0;
  //padding: 0;
}

.content {
  width: 500px;
  margin: 0 auto;
  text-align: center;

}

.btn {
  float: right;
}


.contains {
  width: 980px;
  margin: 0 auto;

}

.menu a {
  display: inline-block;
  text-decoration: none;
  padding: 0 10px;
}

.menu {
  height: 50px;
  line-height: 50px;
  background-color: skyblue;
  //margin: 0 auto;
}

</style>

